<template>
	<div>
		<div class="section-2" v-for="(im, ix) in productlist" :key="ix">
			<div class="sub-title">{{ im.specificationsName }}</div>
			<div class="tag-list">
				<div v-for="(item2, index2) in im.specValueList" :key="index2" @click="selectSpec(im, item2)"
					style="display: flex;flex-direction: column; ;align-items: center;  justify-content: center; flex-wrap: wrap;">
					<!-- <img :src="item2.img" style="width: 50rpx; height: 50rpx;" /> -->
					<view v-if="item2.img" :class="[
					  item2.selected ? 'menu-image' : 'menu-image-no-checked',
					]">
						<image style="border-radius: 50% 50%;" :src="item2.img" mode="scaleToFill" />
					</view>
					<!-- <view class="menu-image-no-checked" v-else>

					</view> -->
					<div class="spec-value" :class="item2.selected ? 'text_color' : ''">
						{{ item2.specificationsValue }}
					</div>
				</div>
			</div>
		</div>
		<div class="btns" @click="handSubmit">立即购买</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				productlist: [{
						specificationsName: "型号",
						specValueList: [{
								specificationsValue: "深洁牙线",
								id: '1',
								selected: true 
							},
							{
								specificationsValue: "深洁牙线1",
								id: '2',
								selected: false
							}
						]
					},
					{
						specificationsName: "SKU",
						specValueList: [{
								specificationsValue: "微蜡牙线，50米*1盒",
								id: '11',
								img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/77/1924b34af8264ccbb076655af84961.png?attname=e9d4f6691658f09033904a28a4da78cd.png',
								selected: true 
							},
							{
								specificationsValue: "舒适牙线，40米*1盒",
								id: '12',
								img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/77/1924b34af8264ccbb076655af84961.png?attname=e9d4f6691658f09033904a28a4da78cd.png',
								selected: false
							},
							{
								specificationsValue: "劲爽牙线，30米*1盒",
								id: '13',
								img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/77/1924b34af8264ccbb076655af84961.png?attname=e9d4f6691658f09033904a28a4da78cd.png',
								selected: false
							}
						]
					}
				],
				selectedIds: []
			};
		},
		methods: {
			selectSpec(group, item) {
				group.specValueList.forEach((v) => {
					v.selected = false;
				});
				item.selected = true;

				
			},
			handSubmit() {
				// 查找选中的规格项
				let selectedSpecs = [];
				this.productlist.forEach((group) => {
					group.specValueList.forEach((item) => {
						if (item.selected) {
							selectedSpecs.push({
								specificationsName: group.specificationsName,
								specificationsValue: item.specificationsValue,
								img: item.img
							});
						}
					});
				});
				// 更新选中的规格值的id数组
				this.selectedIds = this.productlist.flatMap(im =>
					im.specValueList.filter(v => v.selected).map(v => v.id)
				);
				// 输出选中的规格项信息（在实际项目中可能会进一步处理）
				console.log("选中的规格项：", selectedSpecs);
				console.log(this.selectedIds, 'this.selectedIds')
			}
		}
	};
</script>

<style scoped lang="less">
	.tag-list {
		display: flex;
		flex-wrap: wrap;
	}

	.spec-value {
		padding: 5rpx 10rpx;
		margin: 5px;
		cursor: pointer;
		border: #fff 1rpx solid;
	}

	.text_color {
		color: #3498db;
		border: 1rpx solid #3498db;
	}

	.btns {
		cursor: pointer;
		padding: 10px;
		margin-top: 20px;
		text-align: center;
		background-color: #3498db;
		color: #fff;
	}

	.menu-image {
		width: 100rpx;
		height: 100rpx;
		background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/60cb40ff572199778113a809978ef6aa0f09db36.png') 100% no-repeat;
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 60rpx;
			height: 60rpx;
		}
	}

	.menu-image-no-checked {
		width: 100rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 60rpx;
			height: 60rpx;
		}
	}
</style>